<script setup lang="ts">
import {ref, watch} from 'vue';
import {useRoute} from 'vue-router';
import User from "~/api/user"
const user = new User()
import Article from "~/api/Article";
const article = new Article()

const route = useRoute()
const pageSize = 10;
const page = ref(route.query.page ? parseInt(route.query.page as string) : 1);
let data = await article.list(page.value, pageSize)

const pageChanged = async (to: number) => {
  console.log(to)
  data = await article.list(to, pageSize)
}

onMounted(() => pageChanged(page.value))
watch(page, to => pageChanged(to))

const baseTitle = '小熊文案馆';
const subtitle = '留下一句触动心灵的话，感动、开心、回忆、又或只是单纯的记录此刻，让此刻成为珍贵的回忆！';
const defaultDescription = '总有那么一句话，能触动你的心弦。来小熊文案馆，茫茫句海中我们一起分享和找寻那些感动人心、引起共鸣的句子。';

useSeoMeta({
  title: () => page.value > 1 ? `${baseTitle} - 第${page.value}页 - ${subtitle}` : `${baseTitle} - ${subtitle}`,
  description: defaultDescription
});
</script>

<template>
  <div class="page">
    <div v-if="data.list">
      <div v-for="article in data.list" :key="article._id">
        <Content :article="article"/>
      </div>
      <UPagination
          v-model="page"
          :page-count="pageSize"
          :total="data.total"
          :to="(page: number) => ({ query: { page }, })"
          class="mt-10 mb-10"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.test {
}
</style>
